<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF2DOCX API 接口演示</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 { font-size: 2.5em; margin-bottom: 10px; }
        .header p { font-size: 1.2em; opacity: 0.9; }
        
        .nav-tabs {
            display: flex;
            background: #f8f9fa;
            border-bottom: 1px solid #ddd;
        }
        
        .nav-tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            border: none;
            background: none;
            font-size: 1em;
            transition: all 0.3s ease;
        }
        
        .nav-tab.active {
            background: white;
            border-bottom: 3px solid #667eea;
            color: #667eea;
            font-weight: bold;
        }
        
        .nav-tab:hover { background: #e9ecef; }
        
        .content {
            padding: 30px;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .api-section {
            margin-bottom: 40px;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .api-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .api-method {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 5px;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .method-get { background: #28a745; }
        .method-post { background: #007bff; }
        .method-put { background: #ffc107; color: #333; }
        .method-delete { background: #dc3545; }
        
        .api-title { font-size: 1.3em; font-weight: bold; }
        .api-description { color: #666; margin-top: 5px; }
        
        .api-body {
            padding: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 2px solid #ddd;
            border-radius: 5px;
            font-size: 1em;
        }
        
        .form-group input[type="file"] {
            padding: 5px;
        }
        
        .btn {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1em;
            transition: all 0.3s ease;
            margin-right: 10px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
        }
        
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        
        .response-area {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
            border-left: 4px solid #667eea;
        }
        
        .response-area h4 {
            margin-bottom: 10px;
            color: #333;
        }
        
        .response-content {
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            border: 1px solid #ddd;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
        }
        
        .loading.show {
            display: block;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .code-example {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
        }
        
        .code-example h4 {
            color: #4fd1c7;
            margin-bottom: 10px;
        }
        
        .endpoint-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .endpoint-card {
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            background: #f8f9fa;
            transition: all 0.3s ease;
        }
        
        .endpoint-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-online { background: #28a745; }
        .status-offline { background: #dc3545; }
        .status-unknown { background: #ffc107; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 PDF2DOCX API 接口演示</h1>
            <p>在线测试和学习如何使用PDF转Word转换API</p>
        </div>
        
        <div class="nav-tabs">
            <button class="nav-tab active" onclick="showTab('overview')">📋 接口概览</button>
            <button class="nav-tab" onclick="showTab('test')">🧪 在线测试</button>
            <button class="nav-tab" onclick="showTab('examples')">💻 代码示例</button>
            <button class="nav-tab" onclick="showTab('docs')">📚 文档</button>
        </div>
        
        <div class="content">
            <!-- 接口概览 -->
            <div id="overview" class="tab-content active">
                <h2>📋 API 接口概览</h2>
                <p>以下是所有可用的API接口，点击可以查看详细信息：</p>
                
                <div class="endpoint-list">
                    <div class="endpoint-card">
                        <div class="api-method method-get">GET</div>
                        <strong>/api/info</strong>
                        <p>获取API基本信息和版本</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-post">POST</div>
                        <strong>/api/analyze</strong>
                        <p>分析PDF文件的基本信息</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-post">POST</div>
                        <strong>/api/convert</strong>
                        <p>转换PDF文件为Word文档</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-get">GET</div>
                        <strong>/api/download/&lt;id&gt;</strong>
                        <p>下载转换后的Word文档</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-post">POST</div>
                        <strong>/api/batch_convert</strong>
                        <p>批量转换多个PDF文件</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-get">GET</div>
                        <strong>/api/status</strong>
                        <p>获取服务运行状态和系统信息</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-post">POST</div>
                        <strong>/api/cleanup</strong>
                        <p>清理临时文件</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                    
                    <div class="endpoint-card">
                        <div class="api-method method-get">GET</div>
                        <strong>/api/health</strong>
                        <p>健康检查接口</p>
                        <div style="margin-top: 10px;">
                            <span class="status-indicator status-online"></span>
                            <small>在线</small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 在线测试 -->
            <div id="test" class="tab-content">
                <h2>🧪 在线API测试</h2>
                <p>在这里可以直接测试所有API接口：</p>
                
                <!-- API信息测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-get">GET</div>
                        <span class="api-title">/api/info</span>
                        <div class="api-description">获取API基本信息</div>
                    </div>
                    <div class="api-body">
                        <button class="btn" onclick="testApiInfo()">🔍 测试接口</button>
                        <div id="info-response" class="response-area" style="display: none;">
                            <h4>响应结果：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
                
                <!-- PDF分析测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-post">POST</div>
                        <span class="api-title">/api/analyze</span>
                        <div class="api-description">分析PDF文件信息</div>
                    </div>
                    <div class="api-body">
                        <div class="form-group">
                            <label for="analyze-file">选择PDF文件：</label>
                            <input type="file" id="analyze-file" accept=".pdf">
                        </div>
                        <button class="btn" onclick="testAnalyze()">📊 分析文件</button>
                        <div id="analyze-response" class="response-area" style="display: none;">
                            <h4>分析结果：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
                
                <!-- PDF转换测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-post">POST</div>
                        <span class="api-title">/api/convert</span>
                        <div class="api-description">转换PDF为Word文档</div>
                    </div>
                    <div class="api-body">
                        <div class="form-group">
                            <label for="convert-file">选择PDF文件：</label>
                            <input type="file" id="convert-file" accept=".pdf">
                        </div>
                        <div class="form-group">
                            <label for="start-page">起始页面（可选）：</label>
                            <input type="number" id="start-page" min="0" placeholder="留空表示从第1页开始">
                        </div>
                        <div class="form-group">
                            <label for="end-page">结束页面（可选）：</label>
                            <input type="number" id="end-page" min="1" placeholder="留空表示转换到最后一页">
                        </div>
                        <div class="form-group">
                            <label for="return-json">返回格式：</label>
                            <select id="return-json">
                                <option value="false">直接下载文件</option>
                                <option value="true">返回JSON信息</option>
                            </select>
                        </div>
                        <button class="btn" onclick="testConvert()">🔄 开始转换</button>
                        <div id="convert-response" class="response-area" style="display: none;">
                            <h4>转换结果：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 批量转换测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-post">POST</div>
                        <span class="api-title">/api/batch_convert</span>
                        <div class="api-description">批量转换多个PDF文件</div>
                    </div>
                    <div class="api-body">
                        <div class="form-group">
                            <label for="batch-files">选择多个PDF文件：</label>
                            <input type="file" id="batch-files" accept=".pdf" multiple>
                        </div>
                        <button class="btn" onclick="testBatchConvert()">📦 批量转换</button>
                        <div id="batch-response" class="response-area" style="display: none;">
                            <h4>批量转换结果：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 服务状态测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-get">GET</div>
                        <span class="api-title">/api/status</span>
                        <div class="api-description">获取服务运行状态</div>
                    </div>
                    <div class="api-body">
                        <button class="btn" onclick="testStatus()">📈 查看状态</button>
                        <div id="status-response" class="response-area" style="display: none;">
                            <h4>服务状态：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 健康检查测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-get">GET</div>
                        <span class="api-title">/api/health</span>
                        <div class="api-description">健康检查</div>
                    </div>
                    <div class="api-body">
                        <button class="btn" onclick="testHealth()">💚 健康检查</button>
                        <div id="health-response" class="response-area" style="display: none;">
                            <h4>健康状态：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 清理文件测试 -->
                <div class="api-section">
                    <div class="api-header">
                        <div class="api-method method-post">POST</div>
                        <span class="api-title">/api/cleanup</span>
                        <div class="api-description">清理临时文件</div>
                    </div>
                    <div class="api-body">
                        <div class="form-group">
                            <label for="max-age">文件最大保留时间（小时）：</label>
                            <input type="number" id="max-age" value="1" min="0.1" step="0.1">
                        </div>
                        <button class="btn" onclick="testCleanup()">🧹 清理文件</button>
                        <div id="cleanup-response" class="response-area" style="display: none;">
                            <h4>清理结果：</h4>
                            <div class="response-content"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 代码示例 -->
            <div id="examples" class="tab-content">
                <h2>💻 代码示例</h2>
                <p>以下是各种编程语言的调用示例：</p>
                
                <div class="code-example">
                    <h4>🐍 Python 示例</h4>
                    <pre><code>import requests

# 1. 获取API信息
response = requests.get('http://localhost:5000/api/info')
print(response.json())

# 2. 分析PDF文件
with open('example.pdf', 'rb') as f:
    files = {'file': f}
    response = requests.post('http://localhost:5000/api/analyze', files=files)
    print(response.json())

# 3. 转换PDF文件
with open('example.pdf', 'rb') as f:
    files = {'file': f}
    response = requests.post('http://localhost:5000/api/convert', files=files)
    
    if response.ok:
        with open('output.docx', 'wb') as output:
            output.write(response.content)
        print("转换成功！")

# 4. 批量转换
files = [
    ('files', open('file1.pdf', 'rb')),
    ('files', open('file2.pdf', 'rb'))
]
response = requests.post('http://localhost:5000/api/batch_convert', files=files)
print(response.json())</code></pre>
                </div>
                
                <div class="code-example">
                    <h4>🌐 JavaScript 示例</h4>
                    <pre><code>// 1. 获取API信息
fetch('/api/info')
    .then(response => response.json())
    .then(data => console.log(data));

// 2. 转换PDF文件
const fileInput = document.getElementById('fileInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]);

fetch('/api/convert', {
    method: 'POST',
    body: formData
})
.then(response => response.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'converted.docx';
    a.click();
    window.URL.revokeObjectURL(url);
});

// 3. 分析PDF文件
fetch('/api/analyze', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => console.log('分析结果:', data));</code></pre>
                </div>
                
                <div class="code-example">
                    <h4>📱 cURL 示例</h4>
                    <pre><code># 1. 获取API信息
curl http://localhost:5000/api/info

# 2. 分析PDF文件
curl -X POST -F "file=@example.pdf" http://localhost:5000/api/analyze

# 3. 转换PDF文件
curl -X POST -F "file=@example.pdf" http://localhost:5000/api/convert -o output.docx

# 4. 转换指定页面
curl -X POST -F "file=@example.pdf" -F "start_page=0" -F "end_page=5" \
     http://localhost:5000/api/convert -o output.docx

# 5. 批量转换
curl -X POST -F "files=@file1.pdf" -F "files=@file2.pdf" \
     http://localhost:5000/api/batch_convert

# 6. 获取服务状态
curl http://localhost:5000/api/status

# 7. 健康检查
curl http://localhost:5000/api/health</code></pre>
                </div>
            </div>
            
            <!-- 文档 -->
            <div id="docs" class="tab-content">
                <h2>📚 API 文档</h2>
                <p>详细的API接口说明和参数文档：</p>
                
                <div style="text-align: center; margin: 40px 0;">
                    <h3>📖 完整文档</h3>
                    <p>查看完整的API接口文档，包含所有参数说明、响应格式和错误处理。</p>
                    <br>
                    <a href="/static/API接口文档.md" target="_blank" class="btn">📄 查看完整文档</a>
                    <a href="/static/README.md" target="_blank" class="btn">📋 项目说明</a>
                </div>
                
                <div class="endpoint-list">
                    <div class="endpoint-card">
                        <h4>🚀 快速开始</h4>
                        <p>1. 选择要转换的PDF文件</p>
                        <p>2. 调用 /api/convert 接口</p>
                        <p>3. 下载转换后的Word文档</p>
                    </div>
                    
                    <div class="endpoint-card">
                        <h4>📊 文件限制</h4>
                        <p>• 最大文件大小: 50MB</p>
                        <p>• 支持格式: PDF</p>
                        <p>• 并发限制: 10个请求</p>
                    </div>
                    
                    <div class="endpoint-card">
                        <h4>🔒 安全说明</h4>
                        <p>• 临时文件自动清理</p>
                        <p>• 不存储用户数据</p>
                        <p>• 支持HTTPS加密</p>
                    </div>
                    
                    <div class="endpoint-card">
                        <h4>💡 使用建议</h4>
                        <p>• 文本型PDF转换效果更好</p>
                        <p>• 扫描版PDF需要OCR处理</p>
                        <p>• 建议定期清理临时文件</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 加载动画 -->
    <div id="loading" class="loading">
        <div class="spinner"></div>
        <p>处理中，请稍候...</p>
    </div>
    
    <script>
        // 标签页切换
        function showTab(tabName) {
            // 隐藏所有标签页内容
            const contents = document.querySelectorAll('.tab-content');
            contents.forEach(content => content.classList.remove('active'));
            
            // 移除所有标签页的激活状态
            const tabs = document.querySelectorAll('.nav-tab');
            tabs.forEach(tab => tab.classList.remove('active'));
            
            // 显示选中的标签页
            document.getElementById(tabName).classList.add('active');
            event.target.classList.add('active');
        }
        
        // 显示响应结果
        function showResponse(elementId, data, isError = false) {
            const responseArea = document.getElementById(elementId);
            const responseContent = responseArea.querySelector('.response-content');
            
            responseContent.textContent = JSON.stringify(data, null, 2);
            responseContent.style.color = isError ? '#dc3545' : '#333';
            responseArea.style.display = 'block';
        }
        
        // 显示加载动画
        function showLoading() {
            document.getElementById('loading').classList.add('show');
        }
        
        // 隐藏加载动画
        function hideLoading() {
            document.getElementById('loading').classList.remove('show');
        }
        
        // 测试API信息
        async function testApiInfo() {
            showLoading();
            try {
                const response = await fetch('/api/info');
                const data = await response.json();
                showResponse('info-response', data);
            } catch (error) {
                showResponse('info-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 测试PDF分析
        async function testAnalyze() {
            const fileInput = document.getElementById('analyze-file');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择PDF文件');
                return;
            }
            
            showLoading();
            try {
                const formData = new FormData();
                formData.append('file', file);
                
                const response = await fetch('/api/analyze', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                showResponse('analyze-response', data, !data.success);
            } catch (error) {
                showResponse('analyze-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 测试PDF转换
        async function testConvert() {
            const fileInput = document.getElementById('convert-file');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择PDF文件');
                return;
            }
            
            showLoading();
            try {
                const formData = new FormData();
                formData.append('file', file);
                
                const startPage = document.getElementById('start-page').value;
                const endPage = document.getElementById('end-page').value;
                const returnJson = document.getElementById('return-json').value;
                
                if (startPage) formData.append('start_page', startPage);
                if (endPage) formData.append('end_page', endPage);
                formData.append('return_json', returnJson);
                
                const response = await fetch('/api/convert', {
                    method: 'POST',
                    body: formData
                });
                
                if (returnJson === 'true') {
                    const data = await response.json();
                    showResponse('convert-response', data, !data.success);
                } else {
                    if (response.ok) {
                        const blob = await response.blob();
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = file.name.replace('.pdf', '.docx');
                        a.click();
                        window.URL.revokeObjectURL(url);
                        
                        showResponse('convert-response', {
                            success: true,
                            message: '文件已开始下载',
                            filename: file.name.replace('.pdf', '.docx')
                        });
                    } else {
                        const data = await response.json();
                        showResponse('convert-response', data, true);
                    }
                }
            } catch (error) {
                showResponse('convert-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 测试批量转换
        async function testBatchConvert() {
            const fileInput = document.getElementById('batch-files');
            const files = fileInput.files;
            
            if (files.length === 0) {
                alert('请选择至少一个PDF文件');
                return;
            }
            
            showLoading();
            try {
                const formData = new FormData();
                for (let file of files) {
                    formData.append('files', file);
                }
                
                const response = await fetch('/api/batch_convert', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                showResponse('batch-response', data, !data.success);
            } catch (error) {
                showResponse('batch-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 测试服务状态
        async function testStatus() {
            showLoading();
            try {
                const response = await fetch('/api/status');
                const data = await response.json();
                showResponse('status-response', data, !data.success);
            } catch (error) {
                showResponse('status-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 测试健康检查
        async function testHealth() {
            showLoading();
            try {
                const response = await fetch('/api/health');
                const data = await response.json();
                showResponse('health-response', data, !data.success);
            } catch (error) {
                showResponse('health-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 测试清理文件
        async function testCleanup() {
            const maxAge = document.getElementById('max-age').value;
            
            showLoading();
            try {
                const response = await fetch('/api/cleanup', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ max_age_hours: parseFloat(maxAge) })
                });
                
                const data = await response.json();
                showResponse('cleanup-response', data, !data.success);
            } catch (error) {
                showResponse('cleanup-response', { error: error.message }, true);
            } finally {
                hideLoading();
            }
        }
        
        // 页面加载完成后自动测试API信息
        document.addEventListener('DOMContentLoaded', function() {
            testApiInfo();
        });
    </script>
</body>
</html>